<template>
  <div class="index">
    <div class="title">Dashboard</div>
    <div class="data-list flex-a">
      <div class="data-item flex-a flex-b" v-for="(item, index) in state.list">
        <div class="left">
          <div class="money">{{ item.num ? item.num : '' }}</div>
          <div class="total">{{ item.name }}</div>
          <!-- <div class="per">
            <span>22.45%</span>
            <el-icon :size="16" color="#06A561">
              <ArrowUp />
            </el-icon>
          </div> -->
        </div>
        <div>
          <img v-if="index == 0" src="@/assets/icon0.png" alt="">
          <img v-if="index == 1" src="@/assets/icon1.png" alt="">
          <img v-if="index == 2" src="@/assets/icon2.png" alt="">
          <img v-if="index == 3" src="@/assets/icon3.png" alt="">
        </div>
      </div>
    </div>
    <div class="charts flex-b">
      <div class="order" id="line" style="width: 70%;height: 400px;"></div>
      <div class="sale" style="width: 29%;height: 400px;">
        <div class="head">近 7 天销售额</div>
        <div class="num">{{ state.num }}</div>
        <div class="sub">已售商品数</div>
        <div class="num">¥ {{ state.price }}</div>
        <div class="sub">总销售额</div>
        <div class="line"></div>
        <div id="bar" style="width: 100%;height: 200px;"></div>
      </div>
    </div>
    <div class="tables flex-b">
      <div class="t1">
        <div class="tit">实时订单</div>
        <Table action='/orders' ref="table">
          <template #column>
            <el-table-column prop="userId" label="名称">
            </el-table-column>
            <el-table-column prop="totalPrice" label="金额">
              <template #default="scope">
                {{ '￥' + scope.row.totalPrice
                }}</template>
            </el-table-column>
            <el-table-column label="订单状态">
              <template #default="scope">
                <span><el-tag class="ml-2"
                    :type="scope.row.orderStatus == '-1' || scope.row.orderStatus == '-2' || scope.row.orderStatus == '-3' ? 'danger' : scope.row.orderStatus == 0 ? 'warning' : 'success'">{{
                      $filters.orderMap(scope.row.orderStatus) }}</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="日期">
            </el-table-column>
          </template>
        </Table>
      </div>
      <div class="t2">
        <div class="tit">热销产品</div>
        <Table action='/getHotGoodsList' ref="table">
          <template #column>
            <el-table-column prop="goodsName" label="产品名称">
            </el-table-column>
            <el-table-column prop="num" label="销量">
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import Table from '@/components/Table.vue'
import { useRouter } from 'vue-router'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import axios from '@/utils/axios'
import * as echarts from "echarts";
import { localGet } from '@/utils'
const { proxy } = getCurrentInstance()
let table = ref(null)
const router = useRouter()
const state = reactive({
  list: [],
  num: '',
  price: ''
})
// 初始化获取订单列表
onMounted(() => {
  if (localGet('token')) {
    drawLine()
    drawBar()
    axios.post('/getOrderMoney').then(res => {
      state.list = res
    })
    getBarData()
  }
  axios.get('/adminUser/ckPassWord').then(res => {
    if (!res) {
      ElMessageBox.confirm(
        '请前往设置修改自己的原始密码！',
        '提示',
        {
          confirmButtonText: '前往',
          showCancelButton: false,
          closeOnClickModal: false,
          type: 'warning',
        }
      )
        .then(() => {
          router.push({ path: '/account' })
        })
    }
  })
})
const getBarData = () => {
  axios.post('/getLineOrder').then(res => {
    state.num = res.num
    state.price = res.price
    drawBar(res.series, res.xAxis)
  })
}
const drawLine = () => {
  var myChart = echarts.init(document.getElementById('line'));
  axios.post('/getLineOnWeek').then(res => {
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '订单统计'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: []
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: res.xAxis
      },
      yAxis: {
        type: 'value'
      },
      series: res.series
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  })
}
const drawBar = (series, xAxis) => {
  var myChart = echarts.init(document.getElementById('bar'));
  var option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: []
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      data: xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: series
  };
  myChart.setOption(option);
}
</script>
<style lang="scss">
.index {
  .title {
    font-weight: bold;
    color: #131523;
    font-size: 18px;
  }

  .data-list {
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 10px #D7DBEC;
    box-sizing: border-box;
    margin: 20px 0;

    .data-item {
      width: 25%;
      box-sizing: border-box;
      padding: 40px 70px;
      border-right: 1px solid #D7DBEC;

      .left {
        .money {
          color: #131523;
          font-weight: bold;
          font-size: 20px;
        }

        .total {
          color: #5A607F;
          font-size: 14px;
          margin: 0 0 5px;
        }

        .per {
          color: #06A561;
          font-size: 14px;
        }
      }
    }

    .data-item:last-child {
      border: none;
    }
  }

  .charts {

    .order {
      border-radius: 5px;
      box-shadow: 0 0 10px #D7DBEC;
      box-sizing: border-box;
      padding: 20px;
    }

    .sale {
      border-radius: 5px;
      box-shadow: 0 0 10px #D7DBEC;
      box-sizing: border-box;
      padding: 30px;

      .head {
        font-size: 16px;
        color: #131523;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .sub {
        font-size: 14px;
        color: #5A607F;
        margin-bottom: 20px;
      }

      .num {
        font-size: 20px;
        color: #131523;
      }

      .line {
        border-bottom: 1px solid #D9E1EC;
      }
    }
  }

  .tables {
    margin-top: 20px;

    .tit {
      color: #131523;
      font-size: 16px;
      margin-bottom: 10px;
    }

    .t1,
    .t2 {
      border-radius: 5px;
      box-shadow: 0 0 10px #D7DBEC;
      box-sizing: border-box;
      width: 49.5%;
      padding: 20px;

      .el-pagination {
        display: none;
      }
    }
  }
}
</style>